import React, { useState } from 'react';
import {
    DesktopOutlined,
    PieChartOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Button, Layout, Menu, Select, theme } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import i18n from '../../i18n/i18n';

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function mages() {
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }

    const items: MenuItem[] = [
        getItem(<NavLink to={'/mages/home'}>主页面</NavLink>, '1', <PieChartOutlined />),
        getItem(<NavLink to={'/mages/List'}>列表页</NavLink>, '2', <DesktopOutlined />),
        getItem(<NavLink to={'/mages/data1'}>数据1</NavLink>, '3', <PieChartOutlined />),
        getItem(<NavLink to={'/mages/data2'}>数据2</NavLink>, '4', <DesktopOutlined />),

    ];
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const lang = localStorage.getItem('lang') || i18n.language || 'zh'
    const changeLang = (value: string) => {
        i18n.changeLanguage(value)
        localStorage.getItem('lang', value)
    }
    const clickTheme = () => {
        const htmlNode = document.documentElement
        htmlNode.className = htmlNode.className === "dark" ? "light" : "dark"
    }

    return (
        <div>
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                    <div className="demo-logo-vertical" />
                    <Select
                        defaultValue={lang}
                        style={{ width: 120 }}
                        onChange={changeLang}
                        options={[
                            { value: 'zh', label: '中文' },
                            { value: 'en', label: 'english' },
                        ]}
                    />
                    <Button onClick={clickTheme}>黑夜白天</Button>
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
                    
                </Sider>
                <Layout>
                    <Header style={{ padding: 0, background: colorBgContainer }} />
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
                        <div
                            style={{
                                padding: 24,
                                minHeight: 360,
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                            }}
                        >
                            <Outlet />
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>
                        Ant Design ©{new Date().getFullYear()} Created by Ant UED
                    </Footer>
                </Layout>
            </Layout>
        </div>
    );
}

export default mages;
